<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>智能检测 人员基本信息</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <!--JQ-->
    <script type="text/javascript" charset="utf-8"
            src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
    <!--Layui-->
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/common/js/comment.js" charset="utf-8"></script>
    <style>
        .layui-laypage-limits>select{
            width: 100% !important;
        }
    </style>
</head>

<body>
<!--容器-->

<div class="container index clearfix">
    <!--右侧内容-->
    <div class="Right fr" style="width: 100%;">

        <div  lay-filter="docDemoTabBrief" style="margin-top: 12px;">
            <div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
                <div class="layui-row">
                    <div class="layui-col-md4" style="padding-left:1%">
                        <span>文件名称:</span>
                        <input id="fileName" class="layui-input layui-input-inline" type="text" placeholder="文件名称"
                               style="width: 30%">
                        <#--				<input class="layui-btn layui-btn-danger layui-btn-sm fr ml10" type="button" value="重置" onclick="resetQuery()">-->
                        <input class="layui-btn layui-btn-normal" type="button" value="筛选" onclick="query()">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-container"
     style="background-color: #ffffff;width:96%;margin-top:30px;padding:16px;border-radius: 10px">
    <div class="layui-row">
        <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
    </div>
</div>
<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
<script>
    var layer;
    var tableIns;
    $(function () {
        layui.use(['table'], function () {
            table = layui.table;
            //方法级渲染
            tableIns = table.render({
                id: 'tableList',
                elem: '#tableList',
                url: '/search/decision/selBastPracticeFile?id='+'${id}'+'&types='+'${types}'+'&deptCode='+'${deptCode}'+'&cgType='+'${cgType}'+'&name='+'${name}'+'&deptName='+'${deptName}',
                page: false,
                parseData: function(res){
                    if(res && res.length >= 0){
                        return {
                            "code": 0,
                            "msg": "加载成功",
                            "count": res.length,
                            "data":res
                        }
                    }
                },
                cols: [[
                    {title: '序号',width: '10%', align:'center', templet: function (res) {
                            return res.LAY_INDEX;
                        }},
                    {title: 'id', field: 'id', width: '30%',align:'center', sort: false,hide:true},
                    {title: 'url', field: 'url', width: '30%',align:'center', sort: false,hide:true},
                    {title: '文档名称', field: 'fileName', width: '50%',align:'center', sort: false},
                    {title: '操作', field: '查看详情', width: '40%', align:'center',sort: false,templet:function (d) {
                            return '<span class="cursor" style="color: blue;" onclick="showDetailChange(\'' + d.id+'\',\''+d.url+ '\')">查看详情 </span>';}
                    }
                ]],
            });
        })
    })

    function query() {
        var fileName = $('#fileName').val();
        jsondata = {
            fileName: fileName
        };
        table.reload('tableList', {where: jsondata});
    }

    //查看详情
    function showDetailChange(id,url){
        var b=url;
        var fileExtension = b.substring(b.lastIndexOf('.') + 1).toLowerCase();
        var fileType=format(fileExtension);
        if(fileType==1){
            var imgSrc = b;
            var w = ($(window).width() *0.8);
            var h = ($(window).height() *0.8);
            imgSrc=imgSrc+"?v="+Math.random();
            getImageWidth(imgSrc,function(imgW,imgH){
                if(imgW*1 > w*1){
                    imgW = w*1;
                }
                if(imgH*1 > h*1){
                    imgH = h*1;
                }
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    area: [imgW+"px",imgH+"px"],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: '<img src="/supervisor/projectManager/img?fid=' + id + '" height="'+imgH+'px" width="'+imgW+'px" />'
                });
            })
        }else if(fileType==2){
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                area: ["80%","80%"],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<video src="/supervisor/projectManager/img?fid=' + id + '" controls="controls" style="width: 100%;height: 100%"></video>'
            });
        }else{
            POBrowser.openWindowModeless('/sys/office/openword?ft=3&fid=' + id, 'width=1200px;height=800px;', '{}')
        }
    }
    // 获取图片真实高度
    function getImageWidth(url, callback) {
        var img = new Image();
        img.src = url;
        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
            callback(img.width, img.height);
        } else {
            img.onload = function () {
                callback(img.width, img.height);
            }
        }
    }
    //判断文件类型  图片：1；视频：2；其他类型：0
    function format(type){
        if(type=='jpg'||type=='jpeg'||type=='png'||type=='gif'||type=='psd'){
            return 1;
        }else if(type=='mp4'||type=='avi'||type=='wmv'||type=='mpg'||type=='psd'||type=='swf'||type=='mpeg'){
            return 2;
        }else{
            return 0;
        }
    }
</script>
</body>
</html>